<template>
  <view class="container">
    <!-- 左侧导航栏 -->
    <view class="sidebar">
      <view 
        v-for="(item, index) in menus" 
        :key="index"
        class="menu-item"
        :class="{ active: activeMenu === item.name }"
        @click="switchMenu(item)"
      >
        {{ item.text }}
      </view>
    </view>

    <!-- 右侧内容区域 -->
    <view class="content">
      <!-- 动态组件切换 -->
      <component :is="currentComponent" />
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, shallowRef } from 'vue'
import Dashboard from '@/components/Dashboard.vue'
import UserManage from '@/components/UserManage.vue'
import AnimalManage from '@/components/AnimalManage.vue'
import PostManage from '@/components/PostManage.vue'
import {baseUrl} from '../../static/js/common.js'
// 导航菜单数据
const menus = reactive([
  { name: 'dashboard', text: '控制台', component: Dashboard },
  { name: 'user', text: '用户管理', component: UserManage },
  { name: 'animal', text: '流浪动物管理', component: AnimalManage },
  { name: 'post', text: '领养需求管理', component: PostManage }
])

// 当前激活菜单
const activeMenu = ref('dashboard')

// 当前显示的组件
const currentComponent = shallowRef(Dashboard)

// 切换菜单
const switchMenu = (menu) => {
  activeMenu.value = menu.name
  currentComponent.value = menu.component
}
</script>

<style lang="scss">
.container {
  display: flex;
  height: 1900rpx;
}

.sidebar {
  width: 240rpx;
  background: #2c3e50;
  color: #fff;
  // padding: 30rpx 0;

  .menu-item {
    padding: 30rpx 40rpx;
    font-size: 32rpx;
    transition: all 0.3s;
    
    &.active {
      background: #34495e;
      color: #42b983;
      border-left: 8rpx solid #42b983;
    }

    &:active {
      background: #34495e;
    }
  }
}

.content {
  flex: 1;
  padding: 40rpx;
  background: #f5f6f7;
  overflow-y: auto;
}
</style>